<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>测试文档</title>
    <!--引入css-->
    <link rel="stylesheet" href="../css/reset.css" />
    <link rel="stylesheet" href="../css/public.css" />
    <script type="text/javascript">
        if (/Android (\d+\.\d+)/.test(navigator.userAgent)) {
            var version = parseFloat(RegExp.$1);
            if (version > 2.3) {
                var phoneScale = parseInt(window.screen.width) / 750;
                document.write('<meta name="viewport" content="width=750, minimum-scale = ' + phoneScale +
                    ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
            } else {
                document.write('<meta name="viewport" content="width=750, target-densitydpi=device-dpi">');
            }
        } else {
            document.write('<meta name="viewport" content="width=750, user-scalable=no">');
        }
    </script>
    <style>
        /*****搜索*****/
        .scroll-t{
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 20;
        }
        .s-nav {
            background-color: #fafafa;
            height: 60px;
            position: relative;
            width: 100%;
            border-bottom: 1px solid #e8e8e8;
        }

        .goback {
            width: 20px;
            height: 20px;
            margin: 16px 8px 0;
            text-align: center;
        }

        .goback img {
            max-width: 76%;
        }

        .search {
            width: 85%;
            margin-top: 10px;
            border-radius: 3px;
            background: url(../images/fdj1.png) no-repeat 8px center #ececec;
            background-size: 22px 22px;
        }

        .search-input {
            width: 90%;
            height: 40px;
            border: 0;
            color: #333;
            padding-left: 33px;
            font-size: 14px;
            line-height: 40px;
            background: none;
        }

        .search-btn {
            border: 0;
            padding-left: 15px;
            font-size: 16px;
            line-height: 35px;
            background: none;
            margin-top: 12px;
        }

        .fenlei {
            width: 32px;
            height: 32px;
            margin: 10px 10px 0;
            text-align: center;
            display: block;
        }

        .filter {
            height: 60px;
            border-bottom: 1px solid #e8e8e8;
            background: #fff;
            position: relative;
        }

        .filter-inner {
            padding-top: 5px;
        }

        .filter-inner li {
            width: 50%;
            float: left;
            text-align: center;
            font-size: 14px;
            line-height: 60px;
            height: 60px;
        }

        .filter-inner li a {
            margin: 0 auto;
            display: inline;
            position: relative;
            color: #555;
        }

        #pgcontainer {
            padding: 0;
            margin: 0
        }

        .overlay {
            position: fixed;
            z-index: 999;
            background-color: rgba(0, 0, 0, .5);
            bottom: 0;
            right: 0;
            left: 0
        }

        .openmenu .overlay {
            top: 100px
        }

        #hamburgermenu {
            height: 100%;
            width: 0;
            background: #fff;
            position: fixed;
            top: 100px;
            right: 0;
            z-index: 99999;
            overflow: hidden;
            -webkit-box-shadow: 3px 0 7px rgba(0, 0, 0, .55);
            -moz-box-shadow: 3px 0 7px rgba(0, 0, 0, .55);
            box-shadow: 3px 0 7px rgba(0, 0, 0, .55)
        }

        #hamburgermenu dl {
            margin-top: 5px;
            z-index: 99999;
            overflow-y: auto;
            overflow-x: hidden;
        }

        #hamburgermenu dl dd {
            display: block;
            padding: 8px 5px 8px 10px;
            border-bottom: 1px solid #eee;
            color: #333;
            line-height: 22px;
            font-size: 1em;
            text-align: left;
        }

        #hamburgermenu dl dd a {
            display: block;
            min-width: 130px;
            color: #333;
            text-decoration: none;
            background: url(../images/fanhui.png) no-repeat right center;
            background-size: 10px 20px;
        }

        .sx-t {
            height: 40px;
            background: #eee;
            color: #333;
            text-align: center;
            position: relative;
            line-height: 40px;
            width: 100%;
            font-size: 1.2em;
        }

        .sx-t a.sx-ok {
            position: absolute;
            top: 0;
            right: 10px;
            display: block;
            font-size: 0.875em;
        }

        .sx-t a.sx-goback {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 5px;
            left: 8px;
            display: block;
        }

        .sx-t a.sx-goback img {
            max-width: 60%;
        }

        .cc {
            overflow-y: auto;
        }

        .ovfHiden {
            overflow: hidden;
            height: 100%;
        }
        .mt110{
            margin-top: 60px;
        }
    </style>

    <title>列表页</title>
</head>

<body>
    <div class="box" id="pgcontainer">
        
        <div class="scroll-t">
            <div class="filter">
                <ul class="filter-inner clearfix">
                    <li class="filter-cur">
                        <a href="javascript:void(0)" class="zhpx">综合排序 </a>
                    </li>
                    <li class="">
                        <a href="javascript:void(0)" class="menubtn">筛选 </a>
                        <div id="hamburgermenu">
                            <div class="sx-t">
                                <a href="#" class="sx-goback"></a>筛选
                                <a class="sx-ok">确定</a>
                            </div>
                            <div class="cc">

                                <dl id="wine3">
                                    <dd>茅台1</dd>
                                    <dd>茅台2</dd>
                                    <dd>茅台3</dd>
                                    <dd>茅台4</dd>
                                    <dd>茅台5</dd>
                                    <dd>茅台6</dd>
                                    <dd>茅台7</dd>
                                    <dd>茅台8</dd>
                                    <dd>茅台9</dd>
                                    <dd>茅台10</dd>
                                    <dd>茅11台</dd>
                                    <dd>茅12台</dd>
                                </dl>
                            </div>
                        </div>
                        <div class="overlay"></div>
                    </li>
                </ul>

            </div>
        </div>
        <div class="product-list mt110" style="height:500px; background:#ccc; color:#f00;">
                <h1>11111111111请先加载一个jquery.js库，然后点击筛选</h1>
                <h1>2222请先加载一个jquery.js库，然后点击筛选</h1>
                <h1>3333请先加载一个jquery.js库，然后点击筛选</h1>
                <h1>444请先加载一个jquery.js库，然后点击筛选</h1>
                <h1>555请先加载一个jquery.js库，然后点击筛选</h1>
                <h1>666请先加载一个jquery.js库，然后点击筛选</h1>
                <h1>777请先加载一个jquery.js库，然后点击筛选</h1>
                <h1>8888请先加载一个jquery.js库，然后点击筛选</h1>
                <h1>999请先加载一个jquery.js库，然后点击筛选</h1>
                <h1>000请先加载一个jquery.js库，然后点击筛选</h1>
                <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
            <h1>请先加载一个jquery.js库，然后点击筛选</h1>
        </div>

    </div>


    <script src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var menuwidth = 230; // 边栏宽度
            var menuspeed = 300; // 边栏滑出耗费时间

            var $bdy = $('body');
            var $container = $('#pgcontainer');
            var $burger = $('#hamburgermenu');
            /******筛选*******/

            $('.menubtn').on('click', function (e) {
                $('html,body').addClass('ovfHiden'); //使网页不可滚动

                var wap_height = document.documentElement.clientHeight; //浏览器可视高度
                var hidden_height = $('#wine3').height() + 140 - wap_height; //隐藏内容的高度,此处140是弹出层距离顶部的高度，若弹出层置顶，则为0；或者不写
                var visible_height = $('#wine3').height() - hidden_height; //弹出内容可视高度
                document.getElementById("wine3").style.height = visible_height + "px"; //把弹出内容可视高度赋值给它，可以出现滚动条
                $('#wine3').css("overflow-y", "auto");

                if ($bdy.hasClass('openmenu')) {
                    jsAnimateMenu('close');
                } else {
                    jsAnimateMenu('open');
                }
            });

            $('.overlay,.sx-ok,#wine3 dd,.sx-goback').on('click', function (e) {
                if ($bdy.hasClass('openmenu')) {
                    jsAnimateMenu('close');

                    $('html,body').removeClass('ovfHiden'); //使网页恢复可滚
                }
            });

            function jsAnimateMenu(tog) {
                if (tog == 'open') {
                    $bdy.addClass('openmenu');

                    $burger.animate({
                        width: "230px"
                    }, menuspeed);
                    $('.overlay').animate({
                        left: 0
                    }, menuspeed);
                }

                if (tog == 'close') {
                    $bdy.removeClass('openmenu');

                    $burger.animate({
                        width: "0"
                    }, menuspeed);
                    $('.overlay').animate({
                        right: "0"
                    }, menuspeed);
                }
            }

        });
    </script>
</body>

</html>